import React, { useEffect } from 'react'
import style from '../index.module.scss'
import { NavLink, Outlet } from 'react-router-dom'
import { connect } from 'react-redux'
import { LockOutlined } from '@ant-design/icons'
function Bottom(props) {
  return (
    <div className={style.bottom}>
      <div className={style.Nav}>
        <NavLink className={({ isActive }) => isActive ? style.active : ''} to="/information/markDown">笔记</NavLink>
        <NavLink className={({ isActive }) => isActive ? style.active : ''} to="/information/favorites">收藏{ props.privacy.collectionShow?" ":<LockOutlined />}</NavLink>
        <NavLink className={({ isActive }) => isActive ? style.active : ''} to="/information/liked">赞过{ props.privacy.favoriteShow?" ":<LockOutlined />}</NavLink>
      </div>
      <div className={style.outLayt}>
        <Outlet/>
      </div>
    </div>
  )
}
export default connect(
  (state) => {
    return {
      privacy: state.privacy.privacyList
    }
  },
)(Bottom)
